<template>
  <div v-if="browserRedirect">
    <div>
      <div class="table-page-search-wrapper" v-show="showSizer">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
  
            <a-col :span="24">
              <a-form-item label="店家账号">
                <a-input placeholder="请输入标题" v-model="userName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="创建时间">
                <!-- <a-input placeholder="请输入发布人" v-model="queryParam.createTime"></a-input> -->
                <j-date placeholder="请选择正式发行时间" v-model="createTime" :trigger-change="true" style="width:100%;"/>
              </a-form-item>
            </a-col>
  
            <a-col :span="24" >
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
  
          </a-row>
        </a-form>
      </div>
      <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <div class="selSty" @click="showSizer=!showSizer">
            <span>筛选</span>
            <img style='margin-top: -3px;margin-left: 3px;' src="../../assets/common-icon-filter.svg">
          </div>
        </div>
        <a-tab-pane loading="true" tab="操作记录" key="1" style="min-height: 100vh;">
          <ul style="margin: 0;padding:0;list-style-type: none;">
            <li v-for="val in dataSource" class="liCommSty">
              <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 10px;">
                <div style="color: #333;font-weight: bold;">
                  <span>店家账号：</span>
                  <span style="float: right;">{{val.userName}}</span>
                </div>
                <div style="margin-top: 15px;color:#888;">
                  <span>店家类型</span>
                  <span style="float: right;" v-if="val.type==1">发行方</span>
                  <span style="float: right;" v-if="val.type==2">店家</span>
                </div>
              </div>
              <div style="margin-top: 10px;display: flex;justify-content: space-between;">
                <span style="color: #333;">操作内容</span>
                <span style="color:#888;width:60%;">{{val.message}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: #333;">被操作对象</span>
                <span style="float: right;color:#888;">{{val.targetStr}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span style="color: #333;">创建时间</span>
                <span style="float: right;color:#888;">{{val.createTime}}</span>
              </div>
            </li>
          </ul>
          <a-pagination showQuickJumper :defaultCurrent="ipagination.current" :total="ipagination.total" @change="onChange"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  <a-card v-else :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :span="6">
            <a-form-item label="店家账号">
              <a-input placeholder="请输入标题" v-model="userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="创建时间">
              <!-- <a-input placeholder="请输入发布人" v-model="queryParam.createTime"></a-input> -->
              <j-date placeholder="请选择正式发行时间" v-model="createTime" :trigger-change="true" style="width:100%;"/>
            </a-form-item>
          </a-col>

          <a-col :span="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- <div class="table-operator">
      <a-button type="primary" @click="readAll" icon="book">全部标注已读</a-button>
    </div> -->

    <a-table
      ref="table"
      size="default"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">
      <template slot="typelot" slot-scope="text, record, index">
        <div v-if="text==1">发行方</div>
        <div v-if="text==2">店家</div>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="showAnnouncement(record)">查看</a>
      </span>
    </a-table>
    <!-- <show-announcement ref="ShowAnnouncement"></show-announcement> -->
  </a-card>
</template>

<script>
  import { filterObj } from '@/utils/util'
  import { browserRedirect } from '@/utils/util'
  import { getAction,putAction } from '@/api/manage'
  // import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
  // import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JDate from '@/components/jeecg/JDate'  

  export default {
    name: "UserAnnouncementList",
    // mixins: [JeecgListMixin],
    components: {
      // ShowAnnouncement,
      JDate
    },
    data () {
      return {
        showSizer:false,
        browserRedirect:false,
        description: '系统通告表管理页面',
        userName:"",
        createTime:"",
        queryParam: {},
        dataSource:[],
        ipagination:{
          current: 1,
          pageSize: 10,
          showSizeChanger:false,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          total: 0
        },
        columns: [
          {
            title: '店家账号',
            align:"center",
            dataIndex: 'userName'
          },
          {
            title: '店家类型',
            align:"center",
            dataIndex: 'type',
            scopedSlots: {customRender: "typelot"}
          },
          {
            title: '操作内容',
            align:"center",
            dataIndex: 'message'
          },
          {
            title: '被操作对象',
            align:"center",
            dataIndex: 'targetStr'
          },
          {
            title: '创建时间',
            align:"center",
            sorter: (a,b)=>a.createTime-b.createTime,
            dataIndex: 'createTime',
          }
        ],
		    url: {
          list: "/block/blockUserActionLog/list",
          editCementSend:"sys/sysAnnouncementSend/editByAnntIdAndUserId",
          readAllMsg:"sys/sysAnnouncementSend/readAll",
        },
        loading:false,
      }
    },
    mounted() {
      this.searchQuery();
      this.browserRedirect = browserRedirect();
    },
    beforeDestroy() {
      var that = this;
      getAction("/block/blockUserActionLog/editReadBatch").then((res)=>{
        // if (res.success) {
        //   that.countNum = res.result.length;
        //   console.log(that.countNum)
        // }
      })
    },
    methods: {
      onChange(pageNumber) {
        this.ipagination.current = pageNumber;
        this.searchQuery();
      },
      searchReset(){
        this.userName="";
        this.createTime="";
        this.searchQuery();
      },
      handleTableChange(pagination, filters, sorter) {
        this.ipagination = pagination;
        this.searchQuery();
      },
      searchQuery(){
        var that = this;
        let list={
          createTime:that.createTime,
          userName:that.userName,
          pageNo: that.ipagination.current,
          pageSize: 10
        };
        getAction("/block/blockUserActionLog/list",list).then((res)=>{
          if (res.success) {
            that.dataSource = res.result.records;
            that.ipagination.total = res.result.total;
          }
        })
      },
      handleDetail: function(record){
        this.$refs.sysAnnouncementModal.detail(record);
        this.$refs.sysAnnouncementModal.title="查看";
      },
      showAnnouncement(record){
        putAction(this.url.editCementSend,{anntId:record.anntId}).then((res)=>{
          if(res.success){
            this.loadData();
          }
        });
        this.$refs.ShowAnnouncement.detail(record);
      },
      readAll(){
        var that = this;
        that.$confirm({
          title:"确认操作",
          content:"是否全部标注已读?",
          onOk: function(){
            putAction(that.url.readAllMsg).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.loadData();
              }
            });
          }
        });
      },
    }
  }
</script>
<style scoped>
  .liCommSty{
    background-color: #fff;
    padding:15px;
    margin-bottom: 10px;
    border-radius: 6px;
  }
  .ant-card-body .table-operator{
    margin-bottom: 18px;
  }
  .anty-row-operator button{margin: 0 5px}
  .ant-btn-danger{background-color: #ffffff}z

  .ant-modal-cust-warp{height: 100%}
  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
  .selSty{
    font-size: 14px;
    line-height: 60px;
  }
</style>